<template>
  <div :ref="treeRefName"
       :class="treeClassName">
    <div v-if="singleList.length!==0"  v-for="(item) in singleList" :key="item.id"
         :class="[isChild?'process-tree-childNodes-row':'process-tree-roots',
            isChild && item.grade?'long-with-line':'']"
         :style="rootStyle">
      <div>直推</div>
      <div class="process-tree-node" :class="isLeaftNode(item)">
        <div class="items">
          <div class="items-top-box">
            <div class="items-name">{{item.username}}</div>
            <div class="items-role">({{item.name}})</div>
          </div>
          <div class="items-bottom-box">
            <div class="items-account">账号:&nbsp;{{item.mobile}}</div>
            <div class="items-yeji">业绩:&nbsp;{{item.self_money}}</div>
            <div class="items-all">投资总额:&nbsp;{{item.total_money}}</div>
          </div>
          <div class="items-title" @click="handlePush(item.id)">
            点击进入直推列表
          </div>
        </div>
      </div>

      <div class="process-tree-childNodes"
           v-if="item.grade"
           :class="item.grade.length>1?'multiply-node':'single-node'">
        <div>
          <div v-for="(child,index) in item.grade" :key="index"
               class="process-tree-childNodes-row"
               :class="[child.grade?'long-with-line':'']">
            <div class="line" v-if="child.grade"></div>
            <div class="process-tree-node item" :class="isLeaftNode(child)">
              <div class="item-role">{{child.name}}({{child.total_member}})</div>
              <div class="item-title" @click="handlePerson(item.mobile,child.role,item.username,child.total_member,child.name)">点击进入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'processTree',
    props:{
      singleList:{
        type:Array,
        default:()=>{
          return []
        }
      },
      isChild:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        rootStyle:{}
      }
    },
    mounted(){

    },
    watch:{
      data(){
        // this.convertData=this.convert(this.data);
      }
    },
    computed:{
      treeRefName(){
        return this.isChild?'childTree':'baseTree'
      },
      treeClassName(){
        return this.isChild?'':'process-tree'
      }
    },
    methods:{
      initDomWidth(){
        let leafs=document.getElementsByClassName('leaf-node');
        leafs=Array.from(leafs);
        leafs=leafs.map(i=>{
          let total=this.getOffset(i,'offsetLeft');
          return total
        })

        this.rootStyle={width:Math.max(...leafs)*1.5+'px'}
      },
      getOffset(obj,offsetDir){
        var realNum = obj[offsetDir];
        var positionParent = obj.offsetParent;  //获取上一级定位元素对象

        while(positionParent != null){
          realNum += positionParent[offsetDir];
          positionParent = positionParent.offsetParent;
        }
        return realNum;
      },
      isLeaftNode(data){
        return (data.grade && data.grade.length>0)?"":"leaf-node";
      },
      handlePush(memberId){
        this.$router.push({path:'/menus/single-pushPerson',query:{memberId:memberId}})
      },
      handlePerson(memberId,role,username,totalMember,roleName){
        this.$router.push({path:'/menus/single-person',query:{memberId:memberId,role:role,username:username,total:totalMember,roleName:roleName}})
      }
    }
  }
</script>

<style scoped lang="less">
  .process-tree{
    padding: 10px;
    /*overflow: scroll;*/
    padding-bottom: 27px;
    width: 100%;
    padding-right:0;
    font-size:0;
  }
  .process-tree-roots{
    /*width:250%;*/
    margin-bottom:20px;
  }
  .single-node::before{
    content:"";
    display:block;
    position: absolute;
    width:23px;
    height:3px;
    background:rgba(203,221,238,1);
    left:-23px;
    top:52%;
  }
  .multiply-node::before{
    content:"";
    display:block;
    position: absolute;
    width:3px;
    height:100%;
    background:rgba(203,221,238,1);
    left:-23px;
    top:0;
  }

  .process-tree-node{
    position: relative;
    padding:6px 10px;
    background:linear-gradient(90deg,rgba(50,82,241,1) 0%,rgba(74,138,254,1) 100%);
    border-radius: 10px;
    color:#333;
    display:inline-block;
    cursor: pointer;
    min-width:80px;
    text-align:center;
    font-size: 12px;
    vertical-align: middle;
    min-height:20px;
  }
  .items{
    width: 170px;
    height: 150px;
    .items-top-box{
      color: #ffffff;
      padding: 5px;
      .items-name{
        font-size: 15px;
      }
      .items-role{
        font-size: 10px;
      }
    }
    .items-bottom-box{
      font-size: 10px;
      padding: 10px 20px 10px 30px;
      text-align: left;
      color: #ffffff;
    }
    .items-title{
      font-size: 15px;
      color: #ffffff;
      text-decoration: underline;
    }
  }
  .item{
    width: 120px;
    height: 80px;
    color:#ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .item-title{
      padding-top: 10px;
    }
  }
  .process-tree-node::after{
    content:'';
    display:block;
    width:20px;
    height:3px;
    background:rgba(203,221,238,1);
    position:absolute;
    left:100%;
    top:50%
  }
  .leaf-node::after{
    display:none
  }

  .process-tree-childNodes{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left:43px;
    top: -.5px;
  }
  .process-tree-childNodes>div{
    display:flex;
    flex-direction: column;
    justify-content:space-between;
  }

  .multiply-node .process-tree-childNodes-row::before{
    content:"";
    display:block;
    position: absolute;
    width:20px;
    height:3px;
    background:rgba(203,221,238,1);
    left:-20px;
    top:50%;
  }
  .multiply-node .process-tree-childNodes-row:first-child::after,
  .multiply-node .process-tree-childNodes-row:last-child::after{
    content:'';
    position:absolute;
    display:block;
    width:4px;
    height:50%;
    background:#fff;
    left:-23px;
  }
  .multiply-node .long-with-line:first-child::after,
  .multiply-node .long-with-line:last-child::after{
    left:-166px
  }
  .multiply-node .process-tree-childNodes-row:first-child::after{
    top:0px
  }
  .multiply-node .process-tree-childNodes-row:last-child::after{
    bottom:-4px;
  }

  .process-tree-childNodes-row{
    position: relative;
    margin-bottom:10px
  }
  .process-tree-childNodes-row:last-child{
    margin-bottom:0
  }

  .long-with-line{
    margin-left:142px;
  }
  .line{
    position: absolute;
    width:142px;
    height:3px;
    background-color:rgba(203,221,238,1);
    top:50%;
    left:-161px
  }
</style>
